/*
 * @Author: zhengchao
 * @Date: 2021-07-22 15:08:14
 * @LastEditors: zhengchao
 * @LastEditTime: 2021-10-09 14:51:15
 * @Description: 
 * @FilePath: \nocode-react-ts\src\components\boxs\box.tsx
 */
import { useDrag } from 'react-dnd';
import { useMemo, CSSProperties, memo, useEffect, useState } from 'react';
import '../styles/left.scss'

interface props {
  items: any
}

const Box = memo((props: props) => {
  const { items } = props;
  const [icon, setIcon] = useState('')

  const [{ isDragging }, drag] = useDrag({
    item: {
      type: 'box',
      h: items.h,
      id: items.id,
      classify: items.type
    },
    collect: (monitor: { isDragging: () => any }) => {
      return {
        isDragging: monitor.isDragging(),
      }
    }
  });

  const containerStyle: CSSProperties = useMemo(
    () => ({
      opacity: isDragging ? 0.4 : 1,
      height: '140px',
    }),
    [isDragging],
  );

  useEffect(() => {
    (async () => {
      const icon = await import(`../../assets/images/${items.id}.png`)
      setIcon(icon.default)
    })()
  }, [])

  return <div className='box' ref={drag} style={containerStyle}>
    <div className="box-item-main">
      <img src={icon} alt="" />
    </div>
    <div className="box-item-name">{items.title}</div>
  </div>
})

export default Box